@import "compass/css3";
// * * *  VARIABLES * * * 
// width of the arrow (icon)
$w: 5px;
// height of the arrow (icon)
$h: $w;
// color of the arrow (icon)
$c: #2792e4;
// * * * MIXINS * * *
// arrow
@mixin arrow( $width, $height, $top, $left, $way) {
    left: $left;
    top: $top;
    border-width: $height $width;
    border-#{$way}-color: $c;
}

// bodyCurve
@mixin bodyCurve( $width, $height, $top, $left, $border, $btop, $bleft) {
    height: $height;
    width: $width;
    top: $top;
    left: $left;
    &:before {
        @include border-radius(2000px);
        border: $border solid $c;
        height: $height*2 -$border*2;
        width: $width*2 -$border*2;
        top: $btop;
        left: $bleft;
    }
}

.arrow {
    width: $w;
    height: $h;
    position: relative;
    display: inline-block;
    margin: $h/4 $w/4;
    //border:1px solid #EDB;
    &:before,
    &:after {
        content: '';
        border-color: transparent;
        border-style: solid;
        position: absolute;
    }
    .curve {
        position: absolute;
        overflow: hidden;
        &:before {
            content: '';
            position: absolute;
        }
    }
}

// * * * ARROWS * * * 
// * * * CURVE RIGHT ARROW * * *
// * * * ARROW ANIMATE * * * (Just for fun)
.arrow-animate {
    // -webkit-animation: spin 2s infinite linear;
    margin-left: $w/2;
    $h: $h*3+$h*1.25;
    $w: $w*3+$w*1.25;
    height: $h;
    width: $w;
    vertical-align: bottom;
    /*
    i{
    @include border-radius(2000px);
    position: absolute;
    top: $h*.115;
    left:$h*.115;
    width: $w*.57;
    height: $h*.57;
    border:$h*.1 solid rgba(255,0,0,.5);
    z-index: 1000;
  }*/
    .arrow-item {
        width: $w;
        height: $h*.5;
        position: absolute;
        &:before {
            content: '';
            height: 0;
            width: 0;
            position: absolute;
            border: $h*.18 solid transparent;
        }
        .curve {
            height: $h;
            width: $w;
            //background-color: rgba(255,0,0,.2);
            &:before {
                @include border-radius(2000px);
                border: $w*.1 solid $c;
                height: $h*.57;
                width: $w*.57;
                left: $w*.115;
            }
        }
        &:first-child {
            top: 0;
            left: 0;
            &:before {
                border-top-color: $c;
                bottom: -$h*.18;
                right: 1px;
                background: #fff;
                z-index: 99;
            }
            .curve {
                top: 0;
                left: 0;
                &:before {
                    top: $h*.115;
                }
            }
        }
    }
}

@-webkit-keyframes spin {
    0% {
        @include transform(rotate(0deg));
    }
    100% {
        @include transform(rotate(-360deg));
    }
}
